<template>
  <div class="app-container">
    <div v-for="(item,index) in messageList" :key="index">
      <el-badge :value="item.sessionData.senderAccountType == '11' ?'new':''"
                class="badgeStyle">
        <div class="msgBox changeHand" @click="goChatPage(item)">
          <div>
            <image-preview :src="item.sessionData.headUrl" width="70px"></image-preview>
          </div>
          <div class="msgBoxR">
            <div class="title">
              <div>{{ item.sessionData.title }}</div>
              <div class="text-muted fontSize16">{{ parseTime(item.sessionData.viewModifyTime) }}</div>
            </div>
            <div class="text-muted">{{ item.sessionData.content }}</div>
          </div>
        </div>
      </el-badge>
    </div>
  </div>
</template>

<script>
import {orderSendMsg, queryMessageList, sendMsg} from "@/api/autoOperation/python";

export default {
  name: "messageList",
  data() {
    return {
      messageList: [],
      cookie_str: ""
    }
  },
  created() {
    if (this.$route.query) {
      this.cookie_str = this.$route.query.cookie_str
      // this.cookie_str = "ali_apache_id=33.8.71.47.1700632090424.886830.8; _gcl_au=1.1.1040922642.1700632095; _ym_uid=1700632097384053663; _ym_d=1700632097; account_v=1; _hvn_login=13; _fbp=fb.1.1701322249259.426829522; e_id=pt30; aep_common_f=I363L4dJXx8bSxl+okgWJbg7XnqoyXsJ0KHztNgVsnbxwbgCgmGYfw==; aeu_cid=52f5c35ec59b4852bb315adba5cc2bbb-1702542900630-03908-cX37Vqz6; x_router_us_f=x_alimid=2674993116; aep_history=keywords%5E%0Akeywords%09%0A%0Aproduct_selloffer%5E%0Aproduct_selloffer%091005005967889207%091005006001198555%091005006011897852%091005005892114558%091005005865422085%0932827868245%091005002990244740%0932845497995; cna=8KgeHm6bxHoCAXjgdy5NzQnb; xlly_s=1; _lang=zh_CN; l=fB_xbMDHPuYjQxWJBO5IKurza7796BdbcPVzaNbMiIEGa6M5qI205NCOpcOXndtjgTfVhe-rWDM-1dE6JXaLRjkDBeYI4OGGBRJ9-iRLS45..; cto_bundle=NDv32V91WlFZN1dJJTJGcUZsQjlZWjIzVGI3aExlR2hLeFlsWGhiWGtLSFVBQVhuN1lzN3NpVXVEQWdRdkE5RUNuQXNMSHdZYTVLVTBTWFB6ZjhoSDRoUVpDWDkxdkdQRHM5dm0zNGNpOWxVaks4JTJCWnFpYXZmd3JhZlU1OXp4ejZ3RzFzY01IRjdJdVl2b1dEJTJCdkJVZmEwdkZ6NnclM0QlM0Q; lzd_cid=b8f9769f-4cc1-430d-b5f0-32f762cbf515; lazop_lang=zh_CN; intl_locale=en_US; gmp_sid=2674993116; _m_h5_tk=c2dc5a97f7cc69d554e91ddb6d848402_1704954360055; _m_h5_tk_enc=182513fd00d295204f4f3a8186649203; intl_common_forever=3DwTU9wMQfzgvcJqukCl8QABYYXebRkCXn9GSXb4ewnRKa4LIEHHaw==; _gid=GA1.2.1573481459.1704952490; _ga_VED1YSGNC7=GS1.1.1704952491.28.0.1704952491.60.0.0; _ga=GA1.1.151884950.1700632095; ali_apache_track=mt=2|mid=cn1075970114vjnae; ali_apache_tracktmp=; acs_usuc_t=acs_rt=ebe103d704284fd09f53f09480021993&x_csrf=bayrdvpujbrn; havana_tgc=NTGC_1c26353408914f557f5014ad81652c0c; xman_us_t=x_lid=cn1075970114vjnae&sign=y&rmb_pp=86-19531943413&x_user=FcKss4OAi86W4eE0b45A51+vgsUK9Yk/ihq1bPDGSa4=&ctoken=1ausaprre07bp&l_source=aliexpress; aep_usuc_f=site=glo&region=CN&b_locale=en_US&iss=y&s_locale=zh_CN&isfm=y&c_tp=USD&x_alimid=2674993116; sgcookie=E100vNyqX1nqBq67FqYhx/6g058eNU2vH2QKr+QRniJSDc1syUjbF79nenZZGTgt6qORU1fEoOWddOBGAyP5ZAFNqnx2Cq/mNsKwwecjmK9+7YU=; xman_t=4O85hYXofxTEsUx/aWWODgU79d5FGlrBddxGvR91O2Uglbj0MpXHxWGWhFIxWbqOALiUT3zVQPEUptbaHGznikacng0vfkRWO0Aupu33eDRlGivMsPwMts0+h+Akx/W2iL3Q0F/5cm5OgV5SBKmUIV6OuFqgkdmBswN7h4uRU8pNo0+O3M2+uCpq+WmZ9Y4jKjjybhRN38gezIuZBR2aeDYX6JvgImsrcg7H0Z0ldlcwmt0JCFp8ZfFmJKNbiNxNFogC5gJG/+Rwnn8pOZp4vzSvslaFOdhZYbuzk4KwQ/du/m7niIZWPQdxK0ZZ8r6b3oQnZ58Wt8VAS1FYC00r9P3Ga1OJmDw5vkKLDpn4B6VE3jjAO8BznaO90cpZWRukCrtmeUFkdlMLIud8LbmAbEXu3ewWfLKADzZuhUBZ9DyAf9PSvp9hASz8fePPhodLMbLIMvfoORLNUi9JW2vWCzPE+Vb38wpuC3Lo8v/biC5M42lPsUX57NM2Trj2TwkiKED2woVOR0FOn1kqK5xn5CJFmFM2oyPK1h1E4Vrpp6/gZG72ZODp/xHJU9O1S+vKj644n8l50zCz87BYCsfbzfhUoypPJRtPlzZy59Xn4sGNWTdfZFjw6wiRWXC1ydE8c9nkEKO2ucYg5J4d784LWLPLeenfposM4GddR+u11gizeCPach7r3VoLk+Uh2io453OaUO4FR+rI4UiHdFf2kxwwXSh8IEiaJWYp4l1O51cAHJP9sLLzWUlWguwFvhLIXZrDMXSaXcvx799sizbuDbcV92h8oEbMIiscLHxhUEptOgHE73zMIT1i5xnmch4f; xman_f=Zu/gpEqjkUt3de76XZo+ljyQ0+7j058iQHsWCI7kujAj+wF7ZF2f1QdNZD1URe6nh/9i3PHTrjkX8f106IGaQBXBjtCpiEGBupdZh1haOtsEe04wc76AC9t2uFs4QH48/U2sop1Dy51L/VVZSvzH1nD6kQ53YCETznWVQzJx61gX14IVcfA6gm8OBJ58tmKJfIxIG+Tnn4j7yDrjFBteq+zl8d/xUOQgw3bBgtsyDLpjPSIiVQLm2zzlgyWSXFAYlh/b749AiG9rBWWJ+1GFJTRfD6bUaGccG+2QMD+WzqWhFghrGwQktObqlAAYLXAS42GQga8ZvC/CqgpHyKqthT20v5We7ycIbgfzqc6NsOIV4k5+rGpC3oWQP3TxGTufuagN0v4m/1v1EBBpi49B1mWy3sK/uEBZ+ARlalIrFM/togRcKWxXqL5whU8yLLUZg5QsuAIi3wXn+uc1xbE97XfOTmXdrqEO; xman_us_f=zero_order=y&x_locale=en_US&x_l=0&x_user=CN|default%20firstName|default%20lastName|cnfm|2674993116&x_lid=cn1075970114vjnae&x_c_chg=0&x_as_i=%7B%22aeuCID%22%3A%2252f5c35ec59b4852bb315adba5cc2bbb-1702542900630-03908-cX37Vqz6%22%2C%22affiliateKey%22%3A%22cX37Vqz6%22%2C%22channel%22%3A%22AFFILIATE%22%2C%22cv%22%3A%221%22%2C%22isCookieCache%22%3A%22N%22%2C%22ms%22%3A%220%22%2C%22pid%22%3A%22143472817%22%2C%22tagtime%22%3A1702542900630%7D&acs_rt=ceeddf0591f74dd49e0f0c3daba86ea2; isg=BDk59yM9eLcO3yThXQD7pxQKSKUTRi34Ui9Saltv-mDf4l10o5ZuyEhzZOYU38Uw; tfstk=enoMbYxYHVz1ylsSpfE6ATNwNcTL-1ZbajIYMoF28WPIXGEx3ovm6bfYMrp_gSPnG5UTbFMq3xPIM5H9COgIwYStXFZAmlZb0QdJ23BsCoZ4njE1TAGGbRdkw3K-QXFg2POJCHxfYM-WXKodfD9gy7XPW6ZQX_P_aAPZBAnFeP_sLWf11D0aS7-0tiSqxRjPzw7P8OIbLKnFlZaadJVRQ6bPj5wUuB9HKaT_7Jw9wpvhlZaadJVJKpb5GPyQBQC.."
    }
    this.getMessageList()
  },
  methods: {
    // 跳转聊天页面
    goChatPage(item) {
      this.$router.push({
        path: "autoChat",
        query: {
          sessionId: item.sessionId,
          // sessionId: "2#103#2674993116#12#2947280029#11",
          cookie_str: this.cookie_str,
          country: item.sessionData.country,
          targetId: item.sessionData.targetId
        }
      })
    },
    // 获取聊天列表
    getMessageList() {
      let data = {
        cookie_str: this.cookie_str
      }
      queryMessageList(data).then(res => {
        let list = res.data.data.nameSpaceToSessionView
        this.messageList = list[2].sessionViewDTOList
      })
    }
  }
}
</script>

<style scoped>
.msgBox {
  display: flex;
  /*align-items: center;*/
  /*flex-direction: column;*/

  border: 1px solid #cccccc;
  padding: 10px 20px;
  border-radius: 10px;
  width: 60%;
  min-width: 750px;
  /*margin: 20px auto;*/
  /*margin: auto;*/
}

.msgBoxR {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*width: 100%;*/
  font-size: 26px;
  /*font-weight: bold;*/
  color: #000;
}

/deep/ .el-badge__content {
  font-size: 16px;
  border-radius: 50%;
  min-width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: #ea0000;
  /*font-weight: bold;*/
}

.badgeStyle {
  margin: 10px;
}
</style>
